<template>
  <div>
    <div class="header">离职申请表</div>
    <el-form
      ref="leaveOfficeForm"
      v-loading="loading"
      :model="leaveOfficeForm"
      :rules="leaveOfficeRules"
      label-width="0px"
    >
      <div class="entryTableHeader">
        填表日期:{{ leaveOfficeForm.created_at | formatDate }}
      </div>

      <table class="entryTable" cellspacing="0" cellpadding="0">
        <tr class="firstTr">
          <td width="13%" class="firstTd title">部门</td>
          <td width="20%">
            {{ leaveOfficeForm.dep }}
          </td>
          <td width="13%" class="firstTd title">姓名</td>
          <td width="20%">
            {{ leaveOfficeForm.name }}
          </td>
          <td width="13%" class="firstTd title">职位</td>
          <td width="20%">
            {{ leaveOfficeForm.job }}
          </td>
        </tr>
        <tr class="firstTr">
          <td class="firstTd title">入职时间</td>
          <td>
            {{ leaveOfficeForm.comp_fill_entry_date }}
          </td>
          <td class="firstTd title required">拟离职日</td>
          <td>
            <el-form-item prop="plan_leave_date">
              <el-date-picker
                v-model="leaveOfficeForm.plan_leave_date"
                clearable
                type="date"
                placeholder="选择拟离职日日期"
                format="yyyy年MM月dd日"
                value-format="yyyy-MM-dd"
                style="width:100%"
              />
            </el-form-item>
          </td>
          <td class="firstTd title">联系电话</td>
          <td>
            {{ leaveOfficeForm.mobile }}
          </td>
        </tr>
        <tr class="firstTr">
          <td class="firstTd title" :class="leaveOfficeForm.be_regular===0?'':'required'">合同截至日期</td>
          <td>
            <el-form-item prop="contract_end_at">
              <el-date-picker
                v-model="leaveOfficeForm.contract_end_at"
                clearable
                type="date"
                placeholder="选择合同截至日期"
                format="yyyy年MM月dd日"
                value-format="yyyy-MM-dd"
                style="width:100%"
              />
            </el-form-item>
          </td>
          <td class="firstTd title required">员工类别</td>
          <td colspan="3">
            <el-form-item prop="staff_type_id">
              <el-radio-group v-model="leaveOfficeForm.staff_type_id">
                <el-radio v-for="staff in staffTypeList" :key="staff.id" :label="staff.id">{{ staff.name }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td class="firstTd title required">我离职的主要原因</td>
          <td colspan="5" class="textarea-wrapper">
            <el-form-item prop="reason">
              <el-input v-model="leaveOfficeForm.reason"
                        type="textarea" clearable :rows="4" placeholder="请输入我离职的主要原因" maxlength="200" resize="none"
                        show-word-limit
              />
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td class="firstTd title required">我对公司的建议</td>
          <td colspan="5" class="textarea-wrapper">
            <el-form-item prop="advice">
              <el-input v-model="leaveOfficeForm.advice"
                        type="textarea" clearable :rows="4" placeholder="请输入我对公司的建议" maxlength="200" resize="none"
                        show-word-limit
              />
            </el-form-item>
          </td>
        </tr>
        <tr>
          <td class="firstTd title">其它</td>
          <td class="firstTd" colspan="5" style="text-align: left;padding:20px 80px;font-size: 16px;">
            <el-form-item prop="termination_date">

            </el-form-item>
            <div v-if="leaveOfficeForm.be_regular ===0">本人申请自
              <el-date-picker
                v-model="leaveOfficeForm.termination_date"
                style="width: 180px"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                format="yyyy年MM月dd日"
              >
              </el-date-picker>
              起结束与贵司签署的双向考察去协议，无任何补偿。
            </div>
            <div v-else>本人申请自
              <el-date-picker
                v-model="leaveOfficeForm.termination_date"
                type="date"
                style="width: 180px"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                format="yyyy年MM月dd日"
              >
              </el-date-picker>
              起解除与公司的劳动合同,并自接触劳动合同日起接受公司停止支付一切薪资及福利待遇。
            </div>
            <br>
            <div class="sign">日期：</div>
            <div class="sign">申&nbsp;请&nbsp;人(签名)：</div>
          </td>
        </tr>
      </table>
      <el-upload v-show="!!leaveOfficeForm.attachment_handover_sheet" style="width: 70%;margin: 0 auto 30px"
                 :on-preview="downloadSheet"
                 disabled action=""
                 :file-list="sheetList"
      />
    </el-form>

    <div style="text-align: center;margin-bottom: 30px">
      <FlowBtnRow :flow-status="leaveOfficeForm.flow_status" :form-name="'leaveOfficeForm'"
                  :can-check="leaveOfficeForm.can_check"
                  :is-applyer="leaveOfficeForm.is_applyer" :is-new-data="leaveOfficeForm.isNewData"
                  @save="onSave" @submit="onSubmit" @returnBack="onReturnBack" @pass="onPass" @delete="onDelete"
                  @actualDelete="onActualDelete" :flowType="10"
                  :dataId="($route.params || {}).id || (($route.params || {}).handle_param || {}).id"
      />
    </div>

  </div>
</template>

<script>
import {
  actualDeleteData,
  deleteData,
  getDetail as getLeaveOfficeDetails,
  newApplyDetail,
  pass as passData,
  returnBack as returnBackData,
  save as saveData,
  saveAndBegin
} from '@/api/personnel/leave_office'
import { formatDateByFmt } from '@/utils/util'
import { list as getDepartmentList } from '@/api/system/department'
import { Message } from 'element-ui'
import FlowBtnRow from '@/components/FlowBtnRow'
import { list_all3rd_bycode } from '@/api/business/setting/dict'

export default {
  name: 'TransPosition',
  components: {
    FlowBtnRow
  },
  filters: {
    formatDate(time) {
      if (time) {
        return formatDateByFmt(time, 'yyyy年MM月dd日')
      }
    }
  },
  data() {
    return {
      loading: false,
      departmentList: [],
      staffTypeList: [],
      leaveOfficeForm: {
        flow_status: 0,
        can_check: false,
        is_applyer: true,
        isNewData: true,
        created_at: new Date(),
        dep: null,
        name: null,
        job: null,
        plan_leave_date: null,
        phone: null,
        contract_end_at: null,
        staff_type_id: null,
        reason: null,
        advice: null,
        be_regular: null,
        termination_date: null,
        comp_fill_entry_date: null
      },
      sheetList: [],
      leaveOfficeRules: {
        plan_leave_date: [
          { required: true, message: '请选择离职日日期', trigger: ['change'] }
        ],
        phone: [
          { required: true, message: '请填写联系电话', trigger: ['blur', 'change'] }
        ],
        contract_end_at: [
          { required: true, message: '请填写合同截至日期', trigger: ['blur', 'change'] }
        ],
        staff_type_id: [
          { required: true, message: '请选择员工类别', trigger: ['blur', 'change'] }
        ],
        reason: [
          { required: true, message: '请填写我离职的主要原因', trigger: ['blur', 'change'] }
        ],
        advice: [
          { required: true, message: '请填写我对公司的建议', trigger: ['blur', 'change'] }
        ]
      },
      params: {}
    }
  },
  mounted() {
    this.getStaffTypeList()
    const uuid = this.$route.query.uuid
    const params = this.$store.state.keep.pageParamsMap.get(uuid)
    this.params = params
    if (params && (params.id || (params.handle_param && params.handle_param.id))) {
      this.getDetails(params.id || params.handle_param.id)
    } else {
      this.getNewApplyDetail()
    }
  },
  methods: {
    getStaffTypeList() {
      return list_all3rd_bycode({
        code: 'ryxg-yglb'
      }).then(res => {
        this.staffTypeList = res.data
      })
    },
    getNewApplyDetail() {
      this.loading = true
      return newApplyDetail()
        .then(res => {
          if (res.data) {
            delete res.data.created_at
            this.leaveOfficeForm = Object.assign({}, this.leaveOfficeForm, res.data)
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    getDetails(id) {
      this.loading = true
      return getLeaveOfficeDetails(id)
        .then(res => {
          if (res.data) {
            this.leaveOfficeForm = Object.assign({}, this.leaveOfficeForm, res.data)
            if (this.leaveOfficeForm.attachment_handover_sheet) {
              this.sheetList = [{ name: '离职交接单', url: this.leaveOfficeForm.attachment_handover_sheet }]
            } else {
              this.sheetList = []
            }
            this.leaveOfficeForm.isNewData = false
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    downloadSheet(file) {
      console.log(file)
      window.open(file.url)
    },
    // 获取部门信息
    getDepartmentList() {
      return getDepartmentList().then(res => {
        this.departmentList = res.data
      })
    },
    getPostData() {
      return {
        id: this.leaveOfficeForm.id,
        advice: this.leaveOfficeForm.advice,
        contract_end_at: this.leaveOfficeForm.contract_end_at,
        name: this.leaveOfficeForm.name,
        plan_leave_date: this.leaveOfficeForm.plan_leave_date,
        reason: this.leaveOfficeForm.reason,
        staff_type_id: this.leaveOfficeForm.staff_type_id,
        termination_date: this.leaveOfficeForm.termination_date
      }
    },
    // 保存
    onSave() {
      this.$refs.leaveOfficeForm.validate(valid => {
        if (valid) {
          // 显示loading
          this.loading = true

          this.save(this.getPostData(this.leaveOfficeForm))
        } else {
          // ~ 不通过
          return false
        }
      })
    },
    // 保存数据
    save(obj) {
      saveData(obj).then(res => {
        const {
          code,
          message
        } = res
        if (code === 200) {
          Message({
            message,
            type: 'success',
            duration: 1000
          })
          this.detail()
        }
        this.loading = false
      })
        .catch(() => {
          this.loading = false
        })
    },
    // 提交
    onSubmit() {
      // 表单校验
      this.$refs.leaveOfficeForm.validate(valid => {
        // 显示loading
        this.loading = true
        this.submit(this.getPostData(this.leaveOfficeForm))
      })
    },
    // 提交数据
    submit(obj) {
      saveAndBegin(obj)
        .then(res => {
          const {
            code,
            message
          } = res
          if (code === 200) {
            Message({
              message,
              type: 'success',
              duration: 1000
            })
            // this.$router.go(-1)
            this.$store.dispatch('tagsView/closeCurPage')
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    onPass(opinion) {
      this.loading = true
      passData({ id: this.leaveOfficeForm.id, wf_check_opinion: opinion })
        .then(res => {
          const {
            code,
            message
          } = res
          if (code === 200) {
            Message({
              message,
              type: 'success',
              duration: 1000
            })
            // this.$router.go(-1)
            this.$store.dispatch('tagsView/closeCurPage')
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    onReturnBack(opinion) {
      this.loading = true
      returnBackData({ id: this.leaveOfficeForm.id, wf_check_opinion: opinion })
        .then(res => {
          const {
            code,
            message
          } = res
          if (code === 200) {
            Message({
              message,
              type: 'success',
              duration: 1000
            })
            // this.$router.go(-1)
            this.$store.dispatch('tagsView/closeCurPage')
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    onActualDelete() {
      this.loading = true
      actualDeleteData(this.leaveOfficeForm.id)
        .then(res => {
          const {
            code,
            message
          } = res
          if (code === 200) {
            Message({
              message,
              type: 'success',
              duration: 1000
            })
            // this.$router.go(-1)
            this.$store.dispatch('tagsView/closeCurPage')
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    onDelete() {
      this.loading = true
      deleteData(this.leaveOfficeForm.id)
        .then(res => {
          const {
            code,
            message
          } = res
          if (code === 200) {
            Message({
              message,
              type: 'success',
              duration: 1000
            })
            // this.$router.go(-1)
            this.$store.dispatch('tagsView/closeCurPage')
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    }
  },
  watch: {
    'leaveOfficeForm.be_regular': {
      handler(val) {
        if (val === 0) {
          this.$delete(this.leaveOfficeRules, 'contract_end_at')
          this.$nextTick(() => {
            this.$refs.leaveOfficeForm.clearValidate()
          })
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
.entryTableHeader {
  width: 70%;
  line-height: 35px;
  font-size: 14px;
  margin: 0 auto;
  text-align: right;
  font-weight: bold;
  margin-bottom: 10px;
}

.entryTable {
  width: 70%;
  font-size: 14px;
  margin: 0 auto;
}

.entryTable tr td {
  height: 60px;
  line-height: 35px;
  box-sizing: border-box;
  padding: 0 10px;
  border-bottom: 1px solid #E6EAEE;
  border-right: 1px solid #E6EAEE;
  text-align: center;
}

.firstTr td {
  border-top: 1px solid #E6EAEE;
}

.firstTd {
  border-left: 1px solid #E6EAEE;
}

.header {
  padding-top: 20px;
  text-align: center;
  font-size: 25px;
  font-weight: bold;
  margin: 20px auto;
}

.tip {
  color: red;
}

.textarea-box {
  padding: 10px !important;
}

.follow_table {
  margin-top: 20px;
}

.button_group {
  margin: 20px auto;
  text-align: center;
}

.no_last {
  padding-top: 37px;
}

/deep/ .el-form-item {
  margin-bottom: 0;
}

.error_box {
  margin-bottom: 22px;
}

.button_box {
  text-align: center;
  margin-top: -10px;
  padding-bottom: 10px;
}

/deep/ .el-dialog__title {
  font-size: 14px;
}

.sign {
  float: right;
  width: 200px;
  text-align: left;
}

.departwrapper /deep/ .el-input__inner,
.postwrapper /deep/ .el-input__inner {
  border: none;
}

.departwrapper /deep/ .el-form-item__label,
.postwrapper /deep/ .el-form-item__label {
  margin-top: 3px;
  color: #000;
}

.required:before {
  content: "*";
  color: #F56C6C;
  margin-right: 4px;
}

.title {
  background: #F5F7FA;
  font-weight: bold;
}

.entryTable tr td.textarea-wrapper {
  padding: 20px 0 0 0;
}

.textarea-wrapper /deep/ .el-textarea textarea {
  border: 0;
}

///deep/ .el-input__inner{
//  border: none;
//}
</style>

